<template>
	<view class="trainMain">
	<u-form label-width="170" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
		<u-form-item :label-position="labelPosition" label="劳动者姓名" prop="laborName">
			<u-input :border="border" placeholder="请输入劳动者姓名" v-model="model.laborName" type="text"></u-input>
		</u-form-item>
		<u-form-item :label-position="labelPosition" label="身份证号" prop="idCard">

			<u-input :border="border" placeholder="请输入身份证号" v-model="model.idCard" type="text"></u-input>
		</u-form-item>

		<u-form-item :label-position="labelPosition" label="联系电话" prop="tell" label-width="150">
			<u-input :border="border" placeholder="联系电话" v-model="model.tell" type="number"></u-input>
		</u-form-item>
		<u-form-item :label-position="labelPosition" label="户籍地">
			<u-input :border="border" type="select" :select-open="addrpickerShow" v-model="model.hujidizhi"
				placeholder="请选择户籍地" @click="addrpickerShow = true"></u-input>
		</u-form-item>
		<u-picker mode="region"  v-model="addrpickerShow" @confirm="regionConfirm1"></u-picker>


		<u-form-item :label-position="labelPosition" label="目前状态" label-width="150">
			<u-input :border="border" type="select" :select-open="currStateShow" v-model="model.currState"
				placeholder="请选择目前状态" @click="currStateShow = true"></u-input>
		</u-form-item>
		<u-select mode="single-column" :list="currStateList" v-model="currStateShow"
			@confirm="FnConfirm('currState', $event)"></u-select>


		<u-form-item :label-position="labelPosition" label="培训工种" label-width="150">
			<u-input :border="border" type="select" :select-open="workTypeShow" v-model="model.workType"
				placeholder="请选择工种" @click="workTypeShow = true"></u-input>
		</u-form-item>
		<u-select mode="single-column" :list="workTypeList" v-model="workTypeShow"
			@confirm="FnConfirm('workType', $event)"></u-select>
		</u-form>

		<view>
			<view class="btns">
				<u-button class="sub" type="primary">立即申请</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				addrpickerShow: false,  //户籍地
				currStateShow: false,  //目前状态
				workTypeShow:false, //培训工种

				model: {
					//======= 基本信息  begin=====

					laborName: '', // 劳动者姓名
					idCard: '', // 身份证号 110101199003070134
					tell:'', //联系电话
					hujiProvince: '', // 户籍地
					currState: "", // 目前状态
					workType: "", // 工种
				},
				currStateList: [{
					value: '已就业',
					label: '已就业'
				},
				{
					value: '未就业',
					label: '未就业'
				},
				{
					value: '务农',
					label: '务农'
				}
				],
				workTypeList:[ //培训工种
					{
						value: '厨师',
						label: '厨师'
					},
					{
						value: '美容美发',
						label: '美容美发'
					},
					{
						value: '缝纫',
						label: '缝纫'
					},
					{
						value: '装修',
						label: '装修'
					},
					{
						value: '打钻',
						label: '打钻'
					},
					{
						value: '汽修',
						label: '汽修'
					},
					{
						value: '驾驶',
						label: '驾驶'
					},
					{
						value: '居家种植',
						label: '居家种植'
					},
					{
						value: '居家养殖',
						label: '居家养殖'
					},
					{
						value: '挖掘机或铲车驾驶',
						label: '挖掘机或铲车驾驶'
					},
					{
						value: '蜡染',
						label: '蜡染'
					},
					{
						value: '印花',
						label: '印花'
					},
					{
						value: '销售',
						label: '销售'
					},
					{
						value: '文秘',
						label: '文秘'
					},
					{
						value: '冷链食品制作',
						label: '冷链食品制作'
					},
					{
						value: '电工',
						label: '电工'
					},
					{
						value: '包装',
						label: '包装'
					},
					{
						value: '花卉园艺',
						label: '花卉园艺'
					},
					{
						value: '车床',
						label: '车床'
					},
					{
						value: '电子仪器装配',
						label: '电子仪器装配'
					},

					{
						value: '管道安装',
						label: '管道安装'
					},
					{
						value: '电焊',
						label: '电焊'
					},
					{
						value: '熟食品加工',
						label: '熟食品加工'
					},
					{
						value: '木工',
						label: '木工'
					},
					{
						value: '石刻',
						label: '石刻'
					},
					{
						value: '快递物流',
						label: '快递物流'
					},
					{
						value: '酒店服务员',
						label: '酒店服务员'
					},
					{
						value: '餐厅服务员',
						label: '餐厅服务员'
					},
					{
						value: '农产品加工',
						label: '农产品加工'
					},
					{
						value: '砌筑工',
						label: '砌筑工'
					},
					{
						value: '混凝土工',
						label: '混凝土工'
					},
					{
						value: '钢筋工',
						label: '钢筋工'
					},
					{
						value: '架子工',
						label: '架子工'
					},
					{
						value: '装潢',
						label: '装潢'
					},
					{
						value: '室内装修',
						label: '室内装修'
					},
					{
						value: '矿井工',
						label: '矿井工'
					},
					{
						value: '网络编程',
						label: '网络编程'
					},
					{
						value: '公务员或事业单位正式工作人员',
						label: '公务员或事业单位正式工作人员'
					},
					{
						value: '区内城镇公益性岗位',
						label: '区内城镇公益性岗位'
					},
					{
						value: '清洁工',
						label: '清洁工'
					},
					{
						value: '其他',
						label: '其他'
					},

				],
				rules: {
					headName: [{
						required: true,
						message: '请输入户主姓名',
						trigger: 'blur',
					},],
					laborName: [{
						required: true,
						message: '请输入劳动者姓名',
						trigger: 'blur',
					}],

					idCard: [{
						required: true,
						message: '请输入身份证号',
						trigger: 'blur',
					},
					{
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							// console.log(this.$u.test.idCard(value),'&&&&&&&&&');
							if (this.$u.test.idCard(value)) {
								// 拿到性别和年龄
								console.log(this.getIdCardInfo(value, 1), '生日'); //生日
								console.log(this.getIdCardInfo(value, 2), '性别'); //性别
								console.log(this.getIdCardInfo(value, 3), '年龄'); //年龄
								this.model.age = this.getIdCardInfo(value, 3)
								this.model.sex = this.getIdCardInfo(value, 2)
							}
							return this.$u.test.idCard(value);
						},
						message: '身份证号不正确',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change', 'blur'],
					}
					],
					region: [{
						required: true,
						message: '请选择地区',
						trigger: 'change',
					}],



				},
			}
		},

	    methods:{
			regionConfirm1(e) {  //户籍地
        console.log(e,"e---- -")
				this.model.hujiProvince = e.province.label
				this.model.hujiCity = e.city.label
				this.model.hujiArea = e.area.label
				this.model.hujidizhi =
					e.province.label + "-" + e.city.label + "-" + e.area.label;
			},
			FnConfirm(val, name, type) { //目前状态
				console.log(val, name, 9999999999);

				if (type) {
					this.model[type] = name[0].value
				} else {
					this.model[val] = name[0].value
				}
			},
		}

	}
</script>

<style scoped lang="scss">
	.trainMain{
		padding: 10px;
	}
	.btns {
	box-shadow: 0 0 8px #cccccc;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: #fff;

	.sub {
		display: block;
		width: 90%;
		margin: 0 auto;
	}
}
</style>
